<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型案例</title>
    <style>
       *{
        margin: 0;
        padding:0;
       }
       img{
           display:block
       }
       #d1{
           background-color: antiquewhite;
           width: 241px;
           height: 330px;
           padding: 11px 11px 20px;
           margin: 0 auto;
        }
        #d2{
            width: 235px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #254282;
            padding-left: 4px;
            border-left:2px solid #254282;
            margin-bottom: 12px;
        }
        #d3 p{
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            background-color: darkgray;
        }
        #d4 p,#d5 p{
            height: 36px;
            line-height: 18px;
            font-size: 12px;
            background-color: darkgray;
        }
        #d4{
            margin-top: 16px;
            width: 112px;
            float: left;
        }
        #d5{
            margin-top: 16px;
            width: 112px;
            float: left;
            margin-left: 16px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div id="d2">最新资讯</div>
        <div id="d3">
            <img src="image/21-1.jpg" >
            <p>大妈利用十五天时间运营起来一家公司，盈利</p>
        </div>
        <div>
            <div id="d4">
                <img src="image/21-2.jpg" >
                <p>拒绝容貌焦虑，教你有效化妆</p>
            </div>
            <div id="d5">
                <img src="image/21-3.jpg" >
                <p>教你十五天学会穿搭,摇身一变成靓妹</p>
            </div>
        </div>
    </div>
</body>
</html>